<template>
<div class="container">
    <div class="title-three">监察对象</div>
    <div class="choise-row">
        <div class="choise-row-left">
            <span class="label">公司名称：</span>
            <el-select v-model="valueDown">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <span class="label">关键字：</span>
            <el-input v-model="inputvalue" placeholder="请输入姓名或身份证"></el-input>
            <el-row>
                <el-button type="query" @click="Getlist">查询</el-button>
                <el-button type="Reset" @click="GetBack">重置</el-button>
            </el-row>
        </div>
        <div class="choise-row-right">
            <el-button-group>
                <DeleteAll title="是否要删除所选信息吗？" type=2></DeleteAll>
                <Import-all></Import-all>
                <el-button type="newlybuild" icon="el-icon-plus" @click="goNewBuild">新建</el-button>
            </el-button-group>
        </div>
    </div>
    <div class="table-box-three-main">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="51" align="center"></el-table-column>
            <el-table-column prop="name" label="姓名" width="130" align="center"></el-table-column>
            <el-table-column prop="name" label="身份证号" width="230" align="center"></el-table-column>
            <el-table-column prop="name" label="公司名称" min-width="200" align="center"></el-table-column>
            <el-table-column prop="name" label="职务" width="180" align="center"></el-table-column>
            <el-table-column prop="name" label="性别" width="110" align="center"></el-table-column>
            <el-table-column prop="name" label="联系电话" width="235" align="center"></el-table-column>
            <el-table-column prop="name" label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="GotoDetail">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页开始 -->
    <Pagination :total="total" :params="paramsClass" :get="getList"></Pagination>
    <!-- 分页结束 -->
</div>
</template>

<script>
// 分页器
import Pagination from "@/components/Popup/Pagination.vue";
//批量删除
import DeleteAll from "@/components/IncorruptibleArchives/DeleteAll.vue"
//批量导入
import ImportAll from "@/components/IncorruptibleArchives/ImportAll.vue";
export default {
    components: {
        Pagination,
        DeleteAll,
        ImportAll,
    },
    data() {
        return {
            paramsClass: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            valueDown: "",
            inputvalue: "",
            options: [{
                    value: "",
                    label: "全部",
                },
                {
                    value: 1,
                    label: "待审批",
                },
                {
                    value: 2,
                    label: "待发布",
                },
                {
                    value: 3,
                    label: "被退回",
                },
                {
                    value: 4,
                    label: "已发布",
                },
            ],
            tableData: [{
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-08",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-06",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                    date: "2016-05-07",
                    name: "王小虎",
                    address: "上海市普陀区金沙江路 1518 弄",
                },
            ],
            //复选框选择时的
            multipleSelection: [],
        };
    },
    methods: {
        //获取列表
        getList() {

        },
        //查询anniu
        Getlist() {},
        //重置
        GetBack() {},
        //复选框选择时触发
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //, params: { id: id } ,query:{id:1}
        //点击跳转详情
        GotoDetail() {
            this.$router.push({
                name: "supervisiondetail"
            });
        },
        //新建按钮的跳转页面
        goNewBuild() {
            this.$router.push({
                name: "SuperviseNewbuild"
            });
        },
    },
};
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.table-box-three-main {
    width: 100%;
    height: calc(100% - 163px);

    .el-table {
        width: 100%;
        height: 100%;
        overflow: auto;

        /deep/.el-table__body-wrapper {
            width: 100%;
            height: calc(100% - 48px);
            overflow: auto;
        }
    }
}

.pagination-box {
    /deep/.el-pagination {
        margin-top: 15px;
    }
}
</style>
